<template>
  <el-table
    ref="multipleTable"
    :data="TypeList"
    tooltip-effect="dark"
    style="width: 100%"
    :header-cell-style="{ background: '#f3f6fb', border: '0' }"
    :header-row-style="{ border: '0' }"
    :row-style="{ height: '30px' }"
    :cell-style="{ padding: '4px', border: '0' }"
  >
    <el-table-column type="index" label="序号" width="100"> </el-table-column>
    <el-table-column prop="name" label="型号名称" width="160">
    </el-table-column>
    <el-table-column prop="model" label="型号编码" width="160">
    </el-table-column>
    <el-table-column label="设备图片" show-overflow-tooltip>
      <template v-slot="{row}">
        <img :src='row.image' :alt="row.name" class="table_img">
      </template>
    </el-table-column>
    <el-table-column prop="vmRow" label="货道行" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="vmCol" label="货道列" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="channelMaxCapacity" label="设备容量" show-overflow-tooltip>
    </el-table-column>
    <el-table-column label="操作" show-overflow-tooltip>
      <template #default="{ row }">
        <el-button type="default" @click="$emit('updataType', row)"
          >修改</el-button
        >
        <el-button type="danger" @click="deleteType"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'DeviceTypeTable',
  props: {
    TypeList: {
      type: Array,
      required: true
    }
  },
  methods: {
    deleteType () {
      this.$notify({
        title: '警告',
        message: '演示系统，不支持此操作',
        type: 'warning'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-table::before {
    height: 0;
  }
  .table_img{
    width: 24px;
    height: 24px;
    border-radius: 50%;
  }
  .el-tooltip {
    .el-button--default {
      padding: 12px 0;
      border: 0;
      background-color: transparent;
      margin-right: 10px;
      color: #5f84ff;
    }
    .el-button--danger{
      padding: 12px 0;
      border: 0;
      background-color: transparent;
      margin-right: 10px;
      color: red;
    }
  }
</style>
